<template>
    <header class="head">
        
            <h1>项目管理系统-beta</h1>
        
        <div class="infos" v-if="userinfo">
            
            <p>
                欢迎您：{{userinfo.username}}</p>
            <p><el-tag type="success" >{{userinfo.roleid | rolename}}</el-tag>
                </p>
            <p><el-button @click="logout" type="danger">退出登录</el-button></p>

        </div>
    </header>
</template>
<script>
export default {
    props:['userinfo'],
    methods:{
        logout(){
            this.$confirm('你确定要退出登录吗，是否继续？','退出提示',{
                $confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                sessionStorage.removeItem("token") //token判断是否登录标志
                sessionStorage.removeItem("roleid")
               this.$router.push({name:"login"})
            }).catch(()=>{
               
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1{
        color: #fff;
        font-size: 20px;
    }
    .infos{
        display: flex;
        align-items: center;
        p{
            margin-right:10px ;
            color: gold;
        }
    }
}
</style>